<template>
  <div class="flexBet">
    <card
      :width="272"
      title="个人中心"
    >
      <!-- 个人信息 -->
      <div class="mineInfo">
        <!-- 信息区域 -->
        <div class="info">
          <div
            class="avatar_div"
            v-if="!user.avatar"
            :style="{ 'background-color': avatar }"
          >
            {{ getLastTwoCharacters(user.nickName) }}
          </div>
          <el-image
            v-if="user.avatar"
            class="avatar"
            :src="user.avatar"
            :preview-src-list="[user.avatar]"
          >
          </el-image>
          <div class="name flex">
            <div class="name_txt">{{ user.nickName }}</div>
            <img
              v-if="user.sex == 0"
              class="sex"
              src="@/assets/images/sex_man.png"
              alt="加载失败"
            />
            <img
              v-if="user.sex == 1"
              class="sex"
              src="@/assets/images/sex_women.png"
              alt="加载失败"
            />
          </div>
          <div class="stuNum">学号:{{ user.studentNum }}</div>
          <div class="className">班级:{{ user.className }}</div>
          <!--          <div class="medal flex">-->
          <!--            <img src="" alt="加载失败" />-->
          <!--            <img src="" alt="加载失败" />-->
          <!--          </div>-->
          <!-- <div class="progressData">学习进度 <span>x/x</span></div>
          <div class="progressLine rela">
            <div class="progressActive absolute"></div>
          </div> -->
        </div>

        <!-- 按钮区域 -->
        <div class="btns">
          <div
            @mouseover="moveAct = item.navtab"
            @mouseleave="moveAct = null"
            class="btn flex pointer"
            @click="btnsClick(item.navtab)"
            :class="{ activeBtn: activeBtn == item.navtab }"
            v-for="(item, index) in btns"
            :key="index"
          >
            <img
              v-if="activeBtn == item.navtab || moveAct == item.navtab"
              :src="item.activeimg"
              alt="加载失败"
            />
            <img
              v-if="activeBtn != item.navtab && moveAct != item.navtab"
              :src="item.img"
              alt="加载失败"
            />
            {{ item.name }}
          </div>
        </div>
      </div>
    </card>
    <router-view></router-view>
  </div>
</template>

<script>
import { getLastTwoCharacters } from '@/utils/util'
import { mapGetters } from 'vuex'
import { studentInfo } from '@/api/mine/mine'

export default {
  components: {},
  props: {},
  data() {
    return {
      getLastTwoCharacters: function(name) {
        return getLastTwoCharacters(name)
      },
      moveAct: null,
      activeBtn: 5,
      btns: [
        // {
        //   activeimg: require('@/assets/images/checkedimg/study_recorded.png'),
        //   img: require('@/assets/images/checkedimg/study_record.png'),
        //   name: "答疑记录",
        //   navtab: 1,
        // },

        // {
        //   activeimg: require('@/assets/images/checkedimg/medals_detailed.png'),
        //   img: require('@/assets/images/checkedimg/medals_detail.png'),
        //   name: "勋章明细",
        //   navtab: 3,
        // },

        {
          activeimg: require('@/assets/images/checkedimg/self_dataed.png'),
          img: require('@/assets/images/checkedimg/self_data.png'),
          name: '个人数据',
          navtab: 5
        },
        {
          activeimg: require('@/assets/images/checkedimg/question_answer_record.png'),
          img: require('@/assets/images/checkedimg/question_answer_recorded.png'),
          name: '学习记录',
          navtab: 0
        },
        {
          activeimg: require('@/assets/images/checkedimg/appraised.png'),
          img: require('@/assets/images/checkedimg/appraise.png'),
          name: '评价',
          navtab: 2
        },
        {
          activeimg: require('@/assets/images/checkedimg/myselfed.png'),
          img: require('@/assets/images/checkedimg/myself.png'),
          name: '个人资料',
          navtab: 4
        },
        {
          activeimg: require('@/assets/images/checkedimg/wrong_questionsed.png'),
          img: require('@/assets/images/checkedimg/wrong_questions.png'),
          name: '错题集',
          navtab: 6
        }
      ],
      user: ''
    }
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  watch: {
    $route: {
      handler: function(val) {
        this.btns.map((item) => {
          if (item.name == val.meta.title) {
            this.activeBtn = item.navtab
          }
        })
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  methods: {
    /* 更多按钮点击 */
    handleMore() {
    },
    /* 获取个人资料 */
    getInfo() {
      studentInfo().then((res) => {
        this.user = res.data
      })
    },
    /* 按钮组点击 */
    btnsClick(index) {
      this.activeBtn = index
      switch (index) {
        case 0:
          this.$router.push({
            name: 'studyRecord'
          })
          break

        case 1:
          this.$router.push({
            name: 'chat'
          })
          break
        case 2:
          this.$router.push({
            name: 'evaluate'
          })
          break
        case 3:
          this.$router.push({
            name: 'medal'
          })
          break
        case 4:
          this.$router.push({
            name: 'profile'
          })
          break
        case 5:
          this.$router.push({
            name: 'personalData'
          })
          break
        case 6:
          this.$router.push({
            name: 'wrongSetOfQuestions'
          })
          break
      }
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style scoped lang="scss">
.more {
  line-height: 72px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #999999;

  img {
    margin: auto 16px auto 4px;
    width: 6px;
    height: 10px;
  }
}

div.mineInfo {
  .info {
    padding: 21px 24px 32px 24px;
    border-bottom: 1px solid #edeff0;

    .avatar {
      border-radius: 30px;
      margin: 0 0 0 76px;
      width: 60px;
      height: 60px;
    }

    .avatar_div {
      margin: 0 0 0 76px;
      border: 1px solid #eeeeee;
      width: 60px;
      height: 60px;
      border-radius: 30px;
      text-align: center;
      line-height: 58px;
      font-size: 22px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 600;
      color: #ffffff;
    }

    div.name {
      justify-content: center;
      align-items: center;
      margin: 15px 0 0 0;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 18px;

      .name_txt {
        max-width: 150px;
        height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      img.sex {
        margin: 0 0 0 6px;
        width: 12px;
        height: 12px;
      }
    }

    div.stuNum {
      margin-top: 8px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }

    div.className {
      margin-top: 2px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }

    div.medal.flex {
      width: 100%;
      justify-content: center;
      margin-top: 17px;

      img {
        margin: 0 2px;
        width: 16px;
        height: 16px;
      }
    }

    div.progressData {
      margin-top: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 20px;

      span {
        color: #333333;
      }
    }

    div.progressLine.rela {
      width: 224px;
      height: 8px;
      background: #ebebeb;
      border-radius: 4px;

      div.progressActive {
        top: 0;
        left: 0;
        width: 120px;
        height: 8px;
        background: #ffcd7c;
        border-radius: 4px;
      }
    }
  }

  div.btns {
    .btn {
      margin-top: 32px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;

      img {
        margin: 0 12px 0 48px;
        width: 22px;
        height: 22px;
      }
    }

    .btn:hover,
    .activeBtn {
      color: #28b28b;
    }
  }
}

.icon_right {
  width: 12px;
  height: 12px;
  object-fit: cover;
}
</style>
